<template>
  <div class="page">
    <c-title :hide="false" text="中医院"></c-title>
    <div class="top">
      <van-swipe class="my-swipe" :autoplay="3000">
        <van-swipe-item><img :src="List.banner.thumb" v-if="List.banner" /></van-swipe-item>
      </van-swipe>
      <div class="top_About" v-if="List.base != null">
        <img :src="List.base.tcm_logo" />
        <h3>{{ List.base.tcm_name }}</h3>
        <!-- <img src="../../assets/images/goods/pull_up@2x.png" class="img" /> -->
        <div class="address">
          {{ List.base.tcm_desc }}
        </div>
      </div>
    </div>
    <div class="content">
      <div class="shuju">
        <van-row v-if="List != null">
          <van-col span="8" @click="info(List.desc.id, List.desc.title)" v-if="List.desc"><img :src="List.desc.thumb" alt="" /><br />{{ List.desc.title }}</van-col>
          <van-col span="8" @click="info(List.keshi.id, List.keshi.title)" v-if="List.keshi"><img :src="List.keshi.thumb" alt="" /><br />{{ List.keshi.title }}</van-col>
          <van-col span="8" @click="info(List.zhuanjia.id, List.zhuanjia.title)" v-if="List.zhuanjia"><img :src="List.zhuanjia.thumb" alt="" /><br />{{ List.zhuanjia.title }}</van-col>
        </van-row>
        <div class="item" v-if="List.jiankang">
          <div class="box" v-if="List.jiankang" @click="info(List.jiankang.id, List.jiankang.title)">{{ List.jiankang.title }}</div>
          <div class="box" v-if="List.yibao" @click="info(List.yibao.id, List.yibao.title)">{{ List.yibao.title }}</div>
        </div>
        <div class="item">
          <div class="box" v-if="List.jiage" @click="info(List.jiage.id, List.jiage.title)">{{ List.jiage.title }}</div>
          <div class="box" v-if="List.manyi" @click="info(List.manyi.id, List.manyi.title)">{{ List.manyi.title }}</div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <h1>门诊服务</h1>
      <van-row>
        <div v-for="(item, index) in menList" :key="index">
          <van-col span="6" @click="info(item.id, item.title)"
            ><img :src="item.thumb" alt="" v-if="item.thumb != null" /><br />
            <p>{{ item.title }}</p></van-col
          >
        </div>
      </van-row>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      List: {},
      menList: []
    };
  },
  activated() {
    this.getList();
  },

  methods: {
    getList() {
      $http.post("plugin.hft-tcm.frontend.hft-tcm.index").then(response => {
        this.List = response.data;
        this.menList = response.data.menzhen;
      });
    },
    info(id, title) {
      let numList = { id, title };
      this.$router.push(this.fun.getUrl("zyxq", {}, { numList }));
    }
  }
};
</script>

<style scoped lang="scss">
.my-swipe .van-swipe-item {
  img {
    height: 10rem;
    width: 100%;
    vertical-align: top;
  }
}
.btn {
  margin-top: 1rem;
}
.page {
  .top_About {
    height: 5rem;
    border-radius: 1rem;
    background-color: #fff;
    margin: 1rem 0.5rem;
    h3 {
      padding-top: 0.5rem;
    }
    img {
      width: 4rem;
      height: 4rem;
      border-radius: 4rem;
      float: left;
      line-height: 5rem;
    }
    .img {
      width: 1.5rem;
      height: 1.5rem;
      margin: 6% 0% 1% 10%;
    }
    .address {
      font-size: 0.8rem;
      margin-top: 1.5rem;
     
    }
    img:first-child {
      margin: 3% 0% 3% 5%;
    }
  }
  .content {
    width: 100%;
    border-radius: 1rem;
    padding: 1rem;
    background-color: #fff;
    .shuju {
      font-szie: 1rem;

      img {
        width: 4rem;
        height: 4rem;
        border-radius: 50%;
      }
      .item {
        display: flex;
        justify-content: space-around;
        .box {
          background-color: #b9e7f6;
          width: 45%;
          height: 3rem;
          line-height: 3rem;
          margin-top: 1rem;
          font-szie: 1rem;
        }
      }
    }
  }
  .bottom {
    background-color: #fff;
    img {
      width: 4rem;
      height: 4rem;
      margin: 0.5rem 0.5rem 0.3rem 1rem;
      border-radius: 80%;
    }
    p {
      text-align: center;
      margin-bottom: 0.3rem;
    }
  }
}
</style>
